<template>
  <div class="tree-container" style="height: 85vh;padding-left: 20px;padding-top: 20px;">
    <vue3-tree-org :data="data" :center="center" :horizontal="horizontal" :collapsable="collapsable"
      :label-style="style" />
  </div>
</template>
  
<script setup lang="ts">
import { storeToRefs } from "pinia";
import appStore from "@/store";
import { onMounted, ref } from "vue";

const center = ref(true);
const horizontal = ref(false);
const collapsable = ref(false);
const data = {
  "id": 1, "label": "公司组织结构图",
  "children": [
    {
      "id": 2, "pid": 1, "label": "产品研发部",
      "style": { "color": "#fff", "background": "#108ffe" },
      "children": [
        { "id": 6, "pid": 2, "label": "禁止编辑节点", "disabled": true },
        { "id": 8, "pid": 2, "label": "禁止拖拽节点", "noDragging": true },
        { "id": 10, "pid": 2, "label": "测试" }
      ]
    },
    {
      "id": 3, "pid": 1, "label": "客服部",
      "children": [
        { "id": 11, "pid": 3, "label": "客服一部" },
        { "id": 12, "pid": 3, "label": "客服二部" }
      ]
    },
    { "id": 4, "pid": 1, "label": "业务部" },
    { "id": 5, "pid": 1, "label": "人事部" },
    { "id": 6, "pid": 1, "label": "运营部" },
    { "id": 7, "pid": 1, "label": "市场部" },
    { "id": 8, "pid": 1, "label": "销售部" }
  ]
}

const style = {
  background: "#fff",
  color: "#5e6d82",
}

onMounted(async () => {
  try {
    await getDepartmentList();
  } catch (error) {
    console.log(error, 'onMounted-部门管理');
  }
});

async function getDepartmentList() {
  try {
    await appStore.useDepartmentStore.getDepartmentList();
  } catch (error) {
    console.log(error, 'get');
  }
}
</script>
  
<style lang="less" scoped></style>

<!-- 


<template>
    <div>
        <div style="display: flex; padding: 10px;">
            <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
            <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
            <div style="margin-right: 10px"><el-switch v-model="disaled"></el-switch> 禁止编辑</div>
            <div style="margin-right: 10px"><el-switch v-model="onlyOneNode"></el-switch> 仅拖动当前节点</div>
            <div style="margin-right: 10px"><el-switch v-model="cloneNodeDrag"></el-switch> 拖动节点副本</div>
        </div>
        <div style="padding: 0 10px 10px">
            背景色：<el-color-picker v-model="style.background" size="small"></el-color-picker>&nbsp;
            文字颜色：<el-color-picker v-model="style.color" size="small"></el-color-picker>&nbsp;
        </div>
        <div style="height: 400px;">

        </div>
    </div>
</template>
<script>
import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
import { ref } from 'vue'
export default {
    name: "baseTree",
    components: {
        ElSwitch,
        ElColorPicker
    },
    setup() {
        const cloneNodeDrag = ref(true)
        return {
            cloneNodeDrag
        }
    },
    data() {
        return {

            horizontal: true,
            collapsable: true,
            onlyOneNode: false,
            expandAll: true,
            disaled: false,
            style: {
                background: "#fff",
                color: "#5e6d82",
            },
        };
    },
    created() {
        // this.toggleExpand(this.data, this.expandAll);
    },
    methods: {
        onMenus({ node, command }) {
            console.log(node, command);
        },
        onExpand(e, data) {
            console.log(e, data);
        },
        onExpandAll(b) {
            console.log(b)
        },
        nodeDragMove(data) {
            console.log(data);
        },
        beforeDragEnd(node, targetNode) {
            return new Promise((resolve, reject) => {
                if (!targetNode) reject()
                if (node.id === targetNode.id) {
                    reject()
                } else {
                    resolve()
                }
            })
        },
        nodeDragEnd(data, isSelf) {
            console.log(data, isSelf);
        },
        onNodeDblclick() {
            console.log('onNodeDblclick')
        },
        onNodeClick(e, data) {
            ElMessage.info(data.label);
        },
        expandChange() {
            // this.toggleExpand(this.data, this.expandAll);
        },
        toggleExpand(data, val) {
            if (Array.isArray(data)) {
                data.forEach((item) => {
                    item.expand = val
                    if (item.children) {
                        this.toggleExpand(item.children, val);
                    }
                });
            } else {
                data.expand = val
                if (data.children) {
                    this.toggleExpand(data.children, val);
                }
            }
        },
    },
};
</script>


   <template>
    <div>
      <div style="display: flex; padding: 10px;">
          <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
          <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
          <div style="margin-right: 10px"><el-switch v-model="disaled"></el-switch> 禁止编辑</div>
          <div style="margin-right: 10px"><el-switch v-model="onlyOneNode"></el-switch> 仅拖动当前节点</div>
          <div style="margin-right: 10px"><el-switch v-model="cloneNodeDrag"></el-switch> 拖动节点副本</div>
      </div>
      <div style="padding: 0 10px 10px">
        背景色：<el-color-picker v-model="style.background" size="small"></el-color-picker>&nbsp;
        文字颜色：<el-color-picker v-model="style.color" size="small"></el-color-picker>&nbsp;
      </div>
        <div style="height: 400px;">
          <vue3-tree-org
            :data="data"
            center
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-style="style"
            :only-one-node="onlyOneNode"
            :clone-node-drag="cloneNodeDrag"
            :before-drag-end="beforeDragEnd"
            @on-node-drag="nodeDragMove"
            @on-node-drag-end="nodeDragEnd"
            @on-contextmenu="onMenus"
            @on-expand="onExpand"
            @on-node-dblclick="onNodeDblclick"
            @on-node-click="onNodeClick"
          />
        </div>
    </div>
  </template>
  <script>
  import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
  import { ref } from 'vue'
  export default {
    name: "baseTree",
    components: {
      ElSwitch,
      ElColorPicker
    },
    setup() {
      const cloneNodeDrag = ref(true)
      return {
        cloneNodeDrag
      }
    },
    data() {
      return {
        data: {
            "id":1,"label":"xxx科技有限公司",
            "children":[
                {
                    "id":2,"pid":1,"label":"产品研发部",
                    "style":{"color":"#fff","background":"#108ffe"},
                    "children":[
                        {"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},
                        {"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},
                        {"id":10,"pid":2,"label":"测试"}
                    ]
                },
                {
                    "id":3,"pid":1,"label":"客服部",
                    "children":[
                        {"id":11,"pid":3,"label":"客服一部"},
                        {"id":12,"pid":3,"label":"客服二部"}
                    ]
                },
                {"id":4,"pid":1,"label":"业务部"}
            ]
        },
        horizontal: true,
        collapsable: true,
        onlyOneNode: false,
        expandAll: true,
        disaled: false,
        style: {
          background: "#fff",
          color: "#5e6d82",
        },
      };
    },
    created() {
      // this.toggleExpand(this.data, this.expandAll);
    },
    methods: {
      onMenus({ node, command }) {
        console.log(node, command);
      },
      onExpand(e, data) {
        console.log(e, data);
      },
      onExpandAll(b) {
        console.log(b)
      },
      nodeDragMove(data) {
        console.log(data);
      },
      beforeDragEnd(node, targetNode) {
        return new Promise((resolve, reject) => {
          if (!targetNode) reject()
          if (node.id === targetNode.id) {
            reject()
          } else {
            resolve()
          }
        })
      },
      nodeDragEnd(data, isSelf) {
        console.log(data, isSelf);
      },
      onNodeDblclick() {
        console.log('onNodeDblclick')
      },
      onNodeClick(e, data) {
        ElMessage.info(data.label);
      },
      expandChange() {
        // this.toggleExpand(this.data, this.expandAll);
      },
      toggleExpand(data, val) {
        if (Array.isArray(data)) {
          data.forEach((item) => {
            item.expand = val
            if (item.children) {
              this.toggleExpand(item.children, val);
            }
          });
        } else {
          data.expand = val
          if (data.children) {
            this.toggleExpand(data.children, val);
          }
        }
      },
    },
  };
  </script>
   -->